<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>index</title>
	<style>
	    .wrap1{
		    poaition:relative; /*下拉菜单定位*/
			display:inline-block;
		}
		a{
		    list-style:none;
			color:black;
			padding:12px 18px;
			text-decoration:none; /*清除a标签的下划线*/
			font-size:18px;
			display:block;
		}
		button{
			background-color:#4CAF50;
			border:none;
			color:white;
			padding:16px;
			font-size:18px;
			cursor:pointer; /*改变鼠标的形状*/
		}
		.wrap2{
		    display:none;
			position:absolute;
			box-shadow:4px 4px 26px 0 rgba(0,0,0,0.2);
			min-width:160px;  /*最小宽度*/
			background-color:#f9f9f9;
		}
		.wrap1:hover button{
		    background-color:#3e8e41;
		}
		a:hover{
		    background-color:#f1f1f1;
		}
		.wrap1:hover .wrap2{
		    display:block;
		}
	</style>
</head>
<body>
    <div class="wrap1">
	    <button>下拉列表</button>
		<div class="wrap2">
		    <a href="#">wrap1</a>
			<a href="#">wrap2</a>
			<a href="#">wrap3</a>
		</div>
	</div>
</body>
</html>